<template>
	<view class="hp_page">
		<view class="Warehousing_info" style="position: relative;">
			<text style="position: absolute;width: 3px;height: 15px;background-color:#fccc04;top: 22px;left: 0;"></text>
			<view class="hp_info_list">
				<view class="title">
					<text style="font-size: 15px;font-weight: 600;line-height: 40px;">货品入库信息</text>
				</view>
				<view class="hp_number">
					<view class="hp_number-left">
						<view class="info_important">入库货品编号</view>
						<view style="font-size: 12px;color: gainsboro;">货品编号唯一</view>
					</view>
					<view class="hp_number-right">
						<input type="text"
							style="width: 70%;position: absolute;right: 0;text-align: right;height: 60px;line-height: 60px;"
							v-model="hp_info_list.hp_number" placeholder="请填写入库货品编号" placeholder-style="font-size:12px;">
					</view>
				</view>
				<view class="hp_name">
					<view class="hp_name-left">
						<view class="info_important">入库货品名称</view>
					</view>
					<view class="hp_name-right">
						<input type="text"
							style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;"
							v-model="hp_info_list.hp_name" placeholder="请填写入库货品名称" placeholder-style="font-size:12px;">
					</view>
				</view>
				<view class="hp_name">
					<view class="hp_name-left">
						<view class="info_important">货品类别</view>
					</view>
					<view class="hp_name-right">
						<input type="text" @click="qiehuan_fn()"
							style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;"
							v-model="hp_info_list.hp_category" placeholder="请填写入库货品类别" placeholder-style="font-size:12px;">
					</view>
				</view>
				<view class="Category-options" v-show="isState==true ? true:false">
					<text v-for="(item,index) in hp_category" :key="index" class="option" @click="huoqu_fn()">{{item.title}}</text>
					<text class="option" @click="add_category_fn()">+</text>
				</view>
				<view class="hp_name">
					<view class="hp_name-left">
						<view class="info_important">货品数量</view>
					</view>
					<view class="hp_name-right">
						<input type="text"
							style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;"
							v-model="hp_info_list.hp_num" placeholder="请填写入库货品数量" placeholder-style="font-size:12px;">
					</view>
				</view>
				<view class="hp_name">
					<view class="hp_name-left">
						<view class="">货品颜色</view>
					</view>
					<view class="hp_name-right">
						<input type="text"
							style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;"
							v-model="hp_info_list.hp_color" placeholder="请填写入库货品颜色" placeholder-style="font-size:12px;">
					</view>
				</view>
				<view class="hp_name">
					<view class="hp_name-left">
						<view class="">货品尺码</view>
					</view>
					<view class="hp_name-right">
						<input type="text"
							style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;"
							v-model="hp_info_list.hp_size" placeholder="请填写入库货品尺码" placeholder-style="font-size:12px;">
					</view>
				</view>
				<view class="hp_name">
					<view class="hp_name-left">
						<view class="">货品价格</view>
					</view>
					<view class="hp_name-right">
						<input type="text"
							style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;"
							v-model="hp_info_list.hp_price" placeholder="请填写入库货品价格" placeholder-style="font-size:12px;">
					</view>
				</view>
				<view class="hp_name">
					<view class="hp_name-left">
						<view class="">上架时间</view>
					</view>
					<view class="hp_name-right">
						<text
							style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;font-size: 14px;">{{hp_info_list.hp_sj_time}}</text>
					</view>
				</view>
				<uni-section title="上传图片">
					<view class="example-body">
						<uni-file-picker limit="9" @select="dsx" ref="files" :auto-upload="false"></uni-file-picker>
					</view>
				</uni-section>
			</view>
		</view>
		<view class="other_info" style="position: relative;">
			<text style="position: absolute;width: 3px;height: 15px;background-color:#fccc04;top: 12px;left: 0;"></text>
			<view class="title">
				<text style="font-size: 15px;font-weight: 600;line-height: 40px;">其他信息</text>
			</view>
			<view class="hp_name">
				<view class="hp_name-left">
					<view class="">供货商姓名</view>
				</view>
				<view class="hp_name-right">
					<input type="text"
						style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;"
						v-model="hp_info_list.supplier_name" placeholder="请填写供货商姓名" placeholder-style="font-size:12px;">
				</view>
			</view>
			<view class="hp_name" style="border: 0;">
				<view class="hp_name-left">
					<view class="">供货商电话</view>
				</view>
				<view class="hp_name-right">
					<input type="text"
						style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;"
						v-model="hp_info_list.supplier_phone" placeholder="请填写供货商手机号" placeholder-style="font-size:12px;">
				</view>
			</view>
		</view>
		<view class="remarks" style="position: relative;">
			<text style="position: absolute;width: 3px;height: 15px;background-color:#fccc04;top: 12px;left: 0;"></text>
			<view class="title">
				<text style="font-size: 15px;font-weight: 600;line-height: 40px;">备注</text>
			</view>
			<textarea  name="" id="" cols="30" rows="10"
				style="width: 70%"
				v-model="hp_info_list.other_info" placeholder="请输入" placeholder-style="font-size:12px;">
			</textarea>
		</view>
		<button style="margin-top: 10px;background-color: #fccc04;width: 700rpx;" @click="upload()">保存</button>
		<uni-popup ref="yyy" type="dialog">
			<uni-popup-dialog cancelText="取消" confirmText="直接补货" content="此货品仓库已有" @close="close"
				@confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isState: true,
				now_time: '',
				hp_info_list:{
					hp_number:'',
					hp_name:'',
					hp_category:'',
					hp_num:'',
					hp_color:'',
					hp_size:'',
					hp_price:'',
					hp_sj_time:'',
					supplier_name:'',
					supplier_phone:'',
					other_info:''
				},
				hp_category:[],
				insert_status:''
			}
		},
		onLoad() {
			var time = new Date()
			var year = time.getFullYear();
			var month = time.getMonth() + 1;
			var date = time.getDate();
			date = date < 10 ? '0' + date : date;
			this.hp_info_list.hp_sj_time = `${year}-${month}-${date}`;
			uni.request({
				url:'http://localhost:3000/fenlei',
				success: (res) => {
					console.log(res.data.data);
					this.hp_category=res.data.data;
					console.log(this.hp_category);
				}
			})
		},
		methods: {
			add_category_fn(){
				uni.navigateTo({
					url:'../Classification/allclassify'
				})
			},
			close() {
				this.$refs.yyy.close()
			},
			confirm() {
				//补货按钮
				this.$refs.yyy.close()
			},
			upload() {
				console.log(this.hp_info_list);
				uni.request({
					url:'http://localhost:3000/ruku',
					data:{
						'hp_info':this.hp_info_list
					},
					success: (res) => {
						console.log(res.data);
							this.insert_status=true
						
					},
					fail: (res) => {
						this.insert_status=false
						console.log(this.insert_status);
					}
				});
				setTimeout(()=>{
					if(this.insert_status){
						uni.navigateTo({
							url:`../Warehousing/GoodsDetails?xx=${this.hp_info_list.hp_number}`
						})
					}else{
						this.$refs.yyy.open()
					}
				},100)
				console.log(this.$refs.files.files[0].path);
				var one_file = this.$refs.files.files;
				console.log(this.hp_info_list.hp_number);
				for(var i=0;i<one_file.length;i++){
					var hp_code = this.hp_info_list.hp_number
					var img_name = this.hp_info_list.hp_number+i;
					uni.uploadFile({
						url: 'http://localhost:3000/shangchuan', 
						filePath: one_file[i].path,
						name: 'sx',
						formData:{
							'hp_code':hp_code,
							'img_name': img_name
						},
						success: (uploadFileRes) => {
							console.log("上传成功")
							console.log(uploadFileRes);
						},
						fail: (err) => {
							console.log("上传失败")
							console.log(err)
						}
					});
				}
				
				
			},
			dsx(cc) {
				console.log(cc)
			},
			huoqu_fn() {
				console.log(event.target.innerText);
				this.hp_info_list.hp_category = event.target.innerText;
				this.isState = false
			},
			qiehuan_fn() {
				if (this.isState == true) this.isState = false
				else this.isState = true
			},
		}

	}
</script>

<style lang="less">
	.hp_page {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;

		.Warehousing_info {
			width: 700rpx;
			background-color: white;
			box-sizing: border-box;
			padding: 10px;

			.hp_number {
				width: 100%;
				height: 60px;
				display: flex;
				position: relative;
				border-bottom: 1px solid gainsboro;

				.hp_number-left {
					width: 40%;
					margin-top: 10px;

				}
			}

			.Category-options {
				width: 100%;
				border-bottom: 1px solid gainsboro;

				.option {
					display: inline-block;
					height: 25px;
					border: 1px solid gray;
					margin: 7px;
					box-sizing: border-box;
					padding: 0 5px;
					color: gray;
					line-height: 25px;
					border-radius: 3px;
				}
			}
		}
	}

	.other_info {
		margin-top: 10px;
		width: 700rpx;
		background-color: white;
		box-sizing: border-box;
		padding: 0 10px;
	}

	.remarks {
		margin-top: 10px;
		width: 700rpx;
		height: 100px;
		background-color: white;
		box-sizing: border-box;
		padding: 0 10px;
	}

	.hp_name {
		width: 100%;
		height: 40px;
		position: relative;
		display: flex;
		border-bottom: 1px solid gainsboro;

		.hp_name-left {
			width: 40%;
			line-height: 40px;
		}
	}

	.title {
		width: 100%;
		height: 40px;
		border-bottom: 1px solid gainsboro;
	}

	.info_important {
		font-size: 14px;

		&::after {
			content: '*';
			color: red;
		}
	}
</style>
